<template lang="html">
    <div id="about">
        关于我们
        <hr />
        <ul class="clearFix">
            <!-- <router-link
                to="/about"
                tag="li"
                exact
            >
                <a>study</a>
            </router-link>
            <router-link
                to="/about/hobby"
                tag="li"
            >
                <a>hobby</a>
            </router-link>
            <router-link
                to="/about/work"
                tag="li"
            >
                <a>work</a>
            </router-link> -->
            <router-link
                :to='{ name: "About" }'
                tag="li"
                exact
            >
                <a>study</a>
            </router-link>
            <router-link
                :to='{ name: "Hobby" }'
                tag="li"
            >
                <a>hobby</a>
            </router-link>
            <router-link
                :to='{ name: "Work" }'
                tag="li"
            >
                <a>work</a>
            </router-link>
        </ul>

        <!-- 带名字的视图 -->
        <router-view class="aboutAlign"></router-view>

        <hr />
        我是测试数据：{{ test }}
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: "About",
        data () {
            return {
                test: "123"
            };
        },
        beforeCreate () {
            // console.log ( "beforeCreate" );
        },
        // 组件级钩子函数，beforeRouteEnter比beforeCreate先执行
        beforeRouteEnter ( to, from, next ) {
            // console.log ( "beforeRouteEnter......" );
            next ( ( vm ) => {
                vm.test = "我被改变了";
            });
        },
        beforeRouteUpdate ( to, from, next ) {
           //  console.log ( "beforeRouteUpdate......" );
            next ();
        },
        beforeRouteLeave ( to, from, next ) {
            // console.log ( "beforeRouteLeave......." );
            next ();
        }
    };
</script>

<style lang="less" rel="stylesheet/less">

</style>
